<form class="layui-form" lay-filter="form" id="form">
    <div class="layui-form-item">
        <label class="layui-form-label label-required-next">名称</label>
        <div class="layui-input-inline">
            <input type="text" name="title" lay-verify="required" lay-reqText="名称不能为空" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label label-required-next">选择用户组</label>
        <div class="layui-input-block">
            <script type="text/html" template lay-url="{{ layui.setter.apiHost }}/member/group/select" lay-done="layui.form.render();">
                <input type="checkbox" name="user_group[]" lay-filter="user_group_all" value="" title="全部">
                {{# layui.each(d.data, function(index, item){ }}
                <input type="checkbox" name="user_group[]" lay-filter="user_group" value="{{ item.id }}" title="{{ item.title }}" {{# if(layui.jquery.inArray(item.id, d.params.user_group) !=-1){ }}checked{{# } }}>
                {{# }); }}
            </script>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label label-required-next">规则</label>
        <div class="layui-input-block">
            <input type="radio" name="rule_type" lay-filter="rule_type" value="1" title="消费金额" checked="">
            <input type="radio" name="rule_type" lay-filter="rule_type" value="2" title="新用户注册">
        </div>
    </div>
    <div class="layui-form-item" id="select_at">
        <label class="layui-form-label label-required-next">起止时间</label>
        <div class="layui-input-inline">
            <input type="text" name="start_at" id="start_at" lay-verify="required" lay-reqText="开始时间不能为空" autocomplete="off" class="layui-input" readonly>
        </div>
        <div class="layui-form-mid layui-word-aux">-</div>
        <div class="layui-input-inline">
            <input type="text" name="end_at" id="end_at" lay-verify="required" lay-reqText="结束时间不能为空" autocomplete="off" class="layui-input" readonly>
        </div>
    </div>
    <div class="layui-form-item use_price">
        <label class="layui-form-label label-required-next">起用金额</label>
        <div class="layui-input-inline">
            <input type="text" name="use_price" lay-verify="price" lay-reqText="起用金额格式错误" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label label-required-next">活动类型</label>
        <div class="layui-input-inline">
            <select name="type" lay-filter="type" lay-verify="required" lay-reqText="请选择活动类型"></select>
        </div>
        <div class="layui-input-inline layui-hide coupons">
            <select name="coupons_id" lay-filter="coupons_id">
                <option value=""></option>
            </select>
        </div>
        <div class="layui-input-inline layui-hide type_value">
            <input type="text" name="type_value" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux layui-hide type_value_prompt"></div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">描述</label>
        <div class="layui-input-block">
            <textarea name="content" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label"></label>
        <div class="layui-input-inline">
            <input type="hidden" name="id" value="">
            <input type="button" lay-submit lay-filter="form-submit" value="确认" class="layui-btn">
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<script type="text/html" template lay-done="layui.data.sendParams(d.params);"></script>
<script>
    layui.data.sendParams = function (params) {
        layui.use(['verify'], function () {
            let $ = layui.$,
                form = layui.form,
                laydate = layui.laydate,
                common = layui.common,
                model_url = '/market/promotion';

            //日期
            laydate.render({
                elem: '#select_at',
                type: 'datetime',
                range: ['#start_at', '#end_at']
            });

            //监听用户组全部按钮
            form.on('checkbox(user_group_all)', function (data) {
                if (this.checked == true) {
                    $('[lay-filter="user_group"]').prop('checked', true);
                } else {
                    $('[lay-filter="user_group"]').prop('checked', false);
                }
                form.render('checkbox');
            });
            //监听用户组选择
            form.on('checkbox(user_group)', function (data) {
                user_group_select();
            });

            //用户组全选状态
            function user_group_select() {
                let user_group = $('[lay-filter="user_group"]').length;
                let checked_user_group = $('[lay-filter="user_group"]:checked').length;
                if (user_group == checked_user_group) {
                    $('[lay-filter="user_group_all"]').prop('checked', true);
                } else {
                    $('[lay-filter="user_group_all"]').prop('checked', false);
                }
                form.render('checkbox');
            }

            //监听规则选择
            form.on('radio(rule_type)', function (data) {
                set_type(data.value);
            });

            //根据活动规则更新活动类型
            function set_type(rule_type, params = {}) {
                if (rule_type == 1) {
                    $('.use_price').removeClass('layui-hide').find('input');
                } else if (rule_type == 2) {
                    $('.use_price').addClass('layui-hide').find('input').val('0');
                }
                let result = common.ajax(model_url + '/get_type', {rule_type: rule_type});
                if (result) {
                    let html = '<option value="">请选择</option>';
                    $.each(result.data, function (index, item) {
                        let selected = '';
                        if (index == params.type) {
                            selected = 'selected';
                        }
                        html += '<option value="' + index + '" ' + selected + '>' + item + '</option>';
                    })
                    let type_value = params.type_value ? params.type_value : '';
                    $('[name="type"]').html(html);
                    $('.type_value').addClass('layui-hide').find('[name="type_value"]').val(type_value);
                    $('.type_value_prompt,.coupons').addClass('layui-hide');
                    form.render('select');
                }
            }

            //监听活动类型选择
            form.on('select(type)', function (data) {
                $('.type_value input').val('');
                select_type(data.value);
            });

            //更新规则填写
            function select_type(type) {
                type = Number(type);
                if ($.inArray(type, [1, 2, 3, 50]) != -1) {
                    $('.type_value,.type_value_prompt').removeClass('layui-hide');
                    $('.coupons').addClass('layui-hide');
                    let prompt = '';
                    switch (type) {
                        case 1:
                            prompt = '元(整数)';
                            break;
                        case 2:
                            prompt = '%，1-100';
                            break;
                        case 3:
                        case 50:
                            prompt = '积分(整数)';
                            break;
                    }
                    $('.type_value_prompt').text(prompt);
                } else if (type == 4 || type == 51) {
                    $('.type_value,.type_value_prompt').addClass('layui-hide');
                    $('.coupons').removeClass('layui-hide');
                } else {
                    $('.type_value,.type_value_prompt,.coupons').addClass('layui-hide');
                }
            }

            //根据店铺刷新优惠券
            function get_coupons(default_id) {
                if (!default_id) default_id = 0;
                let result = common.ajax('/market/coupons/select');
                if (result) {
                    common.set_select_option('coupons_id', result.data, default_id);
                }
            }

            if (params.id) {
                set_type(params.rule_type, params);
                user_group_select();
                select_type(params.type);
                if (params.type == 4 || params.type == 51) {
                    get_coupons(params.coupons_id);
                }
            } else {
                get_coupons();
                set_type(1);//默认选择
            }
        });
    }
</script>